<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <template id="txt">
        <div>
            <ul>
                <template v-for="(user,index) in users">
                    <!-- template 不会被渲染  -->
                    <li >
                     {{user.id}}
                    </li>
                    <li> {{user.username}}</li>
                    <li> {{user.age}}</li>
                </template>

                <li v-for="(value,key,index) in user">
                    {{index}}- {{key}}: {{value}}
                </li>
            </ul>
        </div>
    </template>
</body>
<script src="/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        template: '#txt',
        data: function () {
            return {
                users: [
                    { id: 1, username: 'make', age: 22 },
                    { id: 2, username: 'rose', age: 23 },
                    { id: 3, username: 'lucy', age: 26 }
                ],
                user: { id: 1, username: 'sss', age: 23 }

            }
        }
    })
</script>

</html>